<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #top{text-align:center;}
        #bmap{height:400px;width:44%;float:right;margin-right:5px;}
        #result{height:500px;width:55%;float:left;text-align:center;margin-left:5px;}
        .etitle{width:60%;margin-left:10px;}
    </style>
    <title>参与式感知</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=74af171e2b27ee021ed33e549a9d3fb9"></script>

<script type="text/javascript">
	
	function submitData(){
		var title=$("#title").val();
		var content=$("#content").val();

		if(title==null || title==''){
			$("#error").html("任务名不能为空！");
		    return false;
		}
		if(content==null || content==''){
			$("#error").html("内容不能为空！");
		    return false;
		}
		return true;
	}
	
</script>    
</head>

<body>
  <div id="top">
    <jsp:include page="head.jsp"></jsp:include>
  </div>
  <br>
  <div id="bmap"></div>
  <div id="result">
    <br>
    <h4>请拖拽小红点，选择任务发布位置</h4>
    <form action="event/output.do" method="post" id="event" onsubmit="return submitData()">
         <span>经度&nbsp;<input type="text" id="lng" name="lng"></span>
         <span>纬度&nbsp;<input type="text" id="lat" name="lat"></span>
         <br>
         <span><font color="red" id="error">${status }</font></span>
         <br>
         <p>任务名：
         <input type="text" name="etitle" class="etitle" id="title" maxlength="100">
         </p><p>内容：
         <textarea name="econtent" cols="60" id="content" rows="9"></textarea>
         </p>
         <p> 
         <input class="submit" type="submit" value="发&nbsp;&nbsp;布">
         </p>
    </form>
  </div>
</body>
</html>

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("bmap");
    var point = new BMap.Point(114.31667,30.51667);
    map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
    map.centerAndZoom(point, 14);
    var marker = new BMap.Marker(point);// 创建标注
    map.addOverlay(marker);             // 将标注添加到地图中
    marker.enableDragging();            //标注可以拖动

    marker.addEventListener("dragend",function(e){
        document.getElementById("lng").value = e.point.lng;
        document.getElementById("lat").value = e.point.lat;
    });
</script>
